<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>智慧脑书</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style>
        header {
            height: 40px;
            padding-left: 5px;
            color: white;
            background-color: #393F4F;
        }

        header span {line-height: 36px;}

        header div img {
            width: 30px;
            height: 30px;
        }

        .header-dropdown {
            padding: 4px;
            cursor: pointer;
            line-height: 30px;
        }

        .header-dropdown:hover {
            background-color: #333333;
        }

        .deleteBtn {
            color: #F2DEDF;
            font-size: 20px;
            cursor: pointer;
        }

        .deleteBtn:hover {
            color: red;
        }

        .userBtn {
            cursor: pointer;
        }

        .userBtn:hover {
            color: #0088cc;
        }

        .jumpTo {
            color: #3A80C0;
            cursor: pointer;
        }

        .jumpTo:hover {
            color: #393F4F;
            text-decoration: underline;
        }

        .popupOutContainer {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 4;
            display: flex;
            justify-content:center;
            align-items:Center;
        }

        .popupInContainer {
            width: 450px;
            border-radius: 12px;
            border: 1px solid silver;
            box-shadow: 0 0 5px #888888;
            background-color: white;
            transition: margin 0.7s ease;
        }

        .popupTop {
            width: 100%;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background-color: rgb(248,248,248);
        }

        .popupArticle {
            height: 90px;
            padding: 20px 10px;
            font-size: 16px;
        }

        .popupTop img {
            width: 20px;
            height: 20px;
        }

        .popupBtn {
            width: 100%;
            height: 45px;
            padding: 5px;
            text-align: right;
        }

        .marginTop40 {
            margin-top: -40px;
        }

        .marginTop0 {
            margin-top: 0;
        }

        /*页面闪烁解决办法*/
        .ng-cloak {
            display: none;
        }
    </style>
</head>
<body ng-app="xiongmaoApp" ng-controller="xiongmaoCtrl" ng-init="naoshuInit()" ng-cloak class="ng-cloak">
<header>
    <span class="pull-left">智慧脑书</span>
    <div class="pull-right dropdown">
        <div class="dropdown-toggle header-dropdown" id="dropdownMenu1" data-toggle="dropdown">
            <img class="img-circle" ng-src="{{user.imgPath}}">
            {{user.name}}
            <span class="caret"></span>
        </div>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="index.html">我的主页</a>
            </li>
            <li role="presentation">
                <a role="menuitem" tabindex="-1" href="naoshu.html">我的脑书</a>
            </li>
            <li role="presentation" class="divider"></li>
            <li role="presentation">
                <a href="#" role="menuitem" tabindex="-1" ng-click="exitUser()">注销</a>
            </li>
        </ul>
    </div>
</header>
<article class="container">
    <div class="jumbotron">
        <h3>我的脑书</h3>
        <button class="btn btn-info"><a href="#" ng-click="newNaoshu()"><span class="glyphicon glyphicon-plus"></span> 新建脑书</a></button>
        <table class="table table-hover" ng-init="tableInit()">
            <thead>
            <tr class="container">
                <th class="col-sm-2">脑书名</th>
                <th class="col-sm-9">简介</th>
                <th class="col-sm-1">删除</th>
            </tr>
            </thead>
            <tbody>
            <tr class="container" ng-repeat="x in naoshuData">
                <td class="col-sm-2">
                    <a ng-click="jumpTo(x.ntId)" class="jumpTo">{{x.ntName}}</a>
                    <span class="glyphicon glyphicon-edit userBtn" ng-click="x.nameShow = !x.nameShow"></span>
                    <span ng-show="x.nameShow">
                        <br>
                        <input type="text" ng-model="x.rename" ng-blur="changeNtName(x.ntName,x.rename,x.ntId)">
                    </span>
                </td>
                <td class="col-sm-9">
                    {{x.abstract}} <span class="glyphicon glyphicon-edit userBtn" ng-click="x.abstractShow = !x.abstractShow"></span>
                    <span ng-show="x.abstractShow">
                        <br>
                        <input type="text" ng-model="x.reabstract" ng-blur="changeNaoshuAbstract(x.reabstract,x.ntId)">
                    </span>
                </td>
                <td class="col-sm-1"><span class="glyphicon glyphicon-remove deleteBtn" ng-click="deleteNt(x.ntId,x.ntName)"></span></td>
            </tr>
            </tbody>
        </table>
    </div>
</article>
<!--提示弹窗-->
<div class="popupOutContainer" ng-show="myAlertShow">
    <div class="popupInContainer" ng-class="popupAnimate">
        <div class="popupTop"><img src="img/alertLogo.png"></div>
        <div class="popupArticle">{{alertMsg}}</div>
        <div class="popupBtn">
            <button class="btn btn-default" ng-click="closePopup()">确定</button>
        </div>
    </div>
</div>

<!--确认弹窗-->
<div class="popupOutContainer" ng-show="myConfirmShow">
    <div class="popupInContainer" ng-class="popupAnimate">
        <div class="popupTop"><img src="img/alertLogo.png"></div>
        <div class="popupArticle">{{confirmMsg}}</div>
        <div class="popupBtn">
            <button class="btn btn-default" ng-click="confirmTrue()">确定</button>
            <button class="btn btn-default" ng-click="closePopup()">取消</button>
        </div>
    </div>
</div>


<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/angular.min.js"></script>
<script src="js/angular-animate.min.js"></script>

<script>
    var app = angular.module('xiongmaoApp', ['ngAnimate']);
    app.controller('xiongmaoCtrl', function($scope,$http,$location) {
        $scope.naoshuInit = function () {
//            弹窗初始化
            $scope.myAlertShow = 0;
            $scope.myConfirmShow = 0;
            $scope.popupAnimate = "marginTop40";

            $scope.rename = {};
            $scope.user = {};
            $scope.naoshuData = {};
            $scope.needCheck();

            $scope.deletedNtId = 0;//需要删除的脑书ID
        };

        //检测cookie函数
        $scope.needCheck = function(){
            $http.get("php/check.php")
                    .success(function(response){
                        if(response === 0){
                            console.log("未找到cookie信息");
                        }
                        else{
                            $scope.user.imgPath = response.imgPath;
                            $scope.user.name = response.name;
                            localStorage.myUserId = response.userId;
                            //在此添加登录后的后台代码
                        }
                    })
                    .error(function(response){
                        $scope.myAlert("服务器请求失败");
                    });
        };

        //表格初始化函数
        $scope.tableInit = function () {
            $http.get("php/naoshuInit.php")
                .success(function(response){
                    localStorage.myNtId = 0;
                    $scope.naoshuData = response;
                    for(i in $scope.naoshuData)
                    {
                        $scope.naoshuData[i].id = i;
                        $scope.rename[i] = $scope.naoshuData[i].ntName;
                    }
                })
                .error(function(response){
                    console.log("服务器请求失败");
                });
        };

        //删除函数
        $scope.deleteNt = function (ntId,ntName) {
            $scope.deletedNtId = ntId;
            $scope.confirmTrue = function () {
                $http({
                    method: 'post',
                    url: 'php/deleteNt.php',
                    data: $scope.deletedNtId,
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
                    .success(function(response){
                        $scope.tableInit();
                        $scope.myAlert("删除成功");
                        console.log(response);
                    })
                    .error(function(response){
                        $scope.myAlert("连接服务器失败");
                    });
                $scope.closePopup();
            };
            $scope.myConfirm("确定删除 "+ntName+" ?");

//            var r = confirm("确定删除 "+ntName+" ?");
//            if(r === true)
//            {
//                $http({
//                    method: 'post',
//                    url: 'php/deleteNt.php',
//                    data: ntId,
//                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
//                })
//                    .success(function(response){
//                        $scope.tableInit();
//                        $scope.myAlert("删除成功");
//                    })
//                    .error(function(response){
//                        $scope.myAlert("连接服务器失败");
//                    });
//            }
        };

        //退出函数
        $scope.exitUser = function () {
            $http({
                method: 'get',
                url: 'php/exitUser.php',
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
                .success(function (response) {
                    localStorage.removeItem("myUserId");
                    $scope.loginData = {};
                    $scope.needCheck();
                })
                .error(function (response) {
                    $scope.myAlert("连接服务器失败")
                });
            window.location.href = "index.html";
        };

        //重命名函数
        $scope.changeNtName = function (ntName,rename,ntId) {
            if(rename != "" && ntName !== rename && rename.length <= 20)//与原名不同且长度不大于20
            {
                $scope.renameData = {};
                $scope.renameData.rename = rename;
                $scope.renameData.ntId = ntId;
                $http({
                    method: 'post',
                    url: 'php/rename.php',
                    data: $scope.renameData,
                    headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
                    .success(function(response){
                        $scope.tableInit();
                    })
                    .error(function(response){
                        $scope.myAlert("连接服务器失败");
                    });
            }
        };

        //修改脑书简介
        $scope.changeNaoshuAbstract = function (reabstract,ntId) {
            if(reabstract != "" && reabstract.length <= 400)//与简介不能为空且长度不大于400
            {
                $scope.postData = {};
                $scope.postData.reabstract = reabstract;
                $scope.postData.ntId = ntId;
                $http({
                    method: 'post',
                    url: 'php/changeAbstract.php',
                    data: $scope.postData,
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
                })
                    .success(function(response){
                        $scope.tableInit();
                    })
                    .error(function(response){
                        $scope.myAlert("连接服务器失败");
                    });
            }
        };

        //新建脑书
        $scope.newNaoshu = function () {
            localStorage.visitedId = 0;
            window.location.href = "dist/index.html";
        };

        //跳转函数
        $scope.jumpTo = function (ntId) {
            localStorage.myNtId = ntId;
            localStorage.visitedId = 0;
            window.location.href = "dist/index.html";
        };

        //关闭所有弹窗
        $scope.closePopup = function () {
            $scope.myAlertShow = 0;
            $scope.myConfirmShow = 0;
            $scope.popupAnimate = "marginTop40";
        };

        //警告框
        $scope.myAlert = function (message) {
            $scope.myAlertShow = 1;
            $scope.alertMsg = message;
            $scope.popupAnimate = "marginTop0";
        };

        $scope.myConfirm = function (message) {
            $scope.confirmMsg = message;
            $scope.myConfirmShow = 1;
            $scope.popupAnimate = "marginTop0";
        };
    });
</script>
</body>
</html>